Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(popover-container): ensure that tab sequence is not lost when container has radio buttons #7100

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

DipperTheDan
Copy link
Contributor

This fix ensures that if the last focusable element in a popover container is a radio button, that the tab sequence is not affected once focus is outside of the container

fixes #7067

Proposed behaviour

Screen.Recording.2024-11-27.at.15.10.51.mov

Current behaviour

Screen.Recording.2024-11-27.at.15.12.32.mov

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

N/A

Testing instructions

Steps to reproduce
Using the new With Radio Button example:

  • Press TAB key until you reach the with Radio children button.
  • Press ENTER to open the popover container.
  • Press TAB key until the last element of the list.
  • Press TAB key.
  • Focus should move to button next to the popover container's opening button.

There should also be no functional regressions or changes to the other PopoverContainer examples.

…tainer has radio buttons

This fix ensures that if the last focusable element in a popover container is a radio button, that
the tab sequence is not affected once focus is outside of the container

fixes #7067
@damienrobson-sage
Copy link
Contributor

Looks like you can't get off the popover at all when using the shouldCoverButton prop (although it can still be closed as normal).
https://github.com/user-attachments/assets/ad134f7d-eec7-4a7e-bec0-63a2f1c006be

@@ -279,7 +279,7 @@ const FocusTrap = ({
onFocus: updateCurrentFocusedElement,
});

// passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
// passes focusProps, sets tabIndex and onBlur if no tabIndex has been explicitly set on child
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: since this isn't related to the commit should we separate it out as it's own chore commit?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, good idea. I'll do that when I come to rebase with master, prior to merging the work.

@DipperTheDan DipperTheDan marked this pull request as ready for review December 3, 2024 13:18
@DipperTheDan DipperTheDan requested review from a team as code owners December 3, 2024 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

The TAB key sequense is lose when it is used in a Popover component with Radio buttons child
3 participants